<template>
    <div class="box">
      <header class="header">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          @focus="$router.push('/search')"
        >
          <template #left>
            <van-icon name="arrow-left" @click="$router.back()"/>
          </template>
        </van-search>
      </header>
      <div class="content">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item v-for="(item, index) of categorylist" :key="index" :title="item" @click="selectBrand(item)"/>
        </van-sidebar>
        <div class="brandbox">
          <van-grid>
            <van-grid-item v-for="(item, index) of brandlist" :key="index" :icon="item.logo" :text="item.brand" @click="tolist(item)"/>
          </van-grid>
        </div>
      </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Sidebar, SidebarItem, Grid, GridItem, Search, Toast, Icon } from 'vant'
import { getCategory, getCategoryLogo } from '@/api/search'

Vue.use(Sidebar)
Vue.use(SidebarItem)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Search)
Vue.use(Toast)
Vue.use(Icon)

export default {
  data () {
    return {
      activeKey: 0,
      categorylist: [],
      brandlist: [],
      value: ''
    }
  },
  methods: {
    tolist (item) {
      // this.$router.push(`/searchlist?brand=${item.brand}&category=${this.categorylist[this.activeKey]}`)
      this.$router.push({ path: 'searchlist', query: { brand: item.brand, category: this.categorylist[this.activeKey] } })
    },
    selectBrand (item) {
      getCategoryLogo({
        category: item
      }).then(res => {
        this.brandlist = res.data.data
      })
    }
  },
  created () {
    getCategory().then(res => {
      this.categorylist = res.data.data
      this.selectBrand(this.categorylist[0])
    })
  }
}
</script>

<style lang="scss" scoped>
.content{
  background-color: #fff;
  display: flex;
  .van-sidebar {
    width: 80px;
  }
  .brandbox{
    flex: 1;
    height: 100%;
    overflow: auto;
  }
}
.van-search {
  height: 0.44rem;
  .van-icon{
    font-size: 18px;
  }
  .van-cell{
    padding: 2px 0;
  }
  .van-search__content.van-search__content--square {
    margin-left: 12px;
  }
}
</style>
